<template>
	<view class="setting">
		<view class="flex setting-cont-one">
			<view class="">同步你的昵称、头像</view>
			<switch checked="true" />
		</view>
		<view class="setting-small">
			选择同步的头像与昵称
		</view>
		<view class="setting-cont">
			<view class="flex sett-cont-two">
				<view class=" flexs">
					<image src="../../static/Q.jpg" mode="widthFix"></image>
					<view class="">用户昵称</view>
				</view>
				<view class="show-or-noshow dui" @click = "showTag">{{flag?"0":"√"}}</view>
			</view>
			<view class="sett-cont-two flexs">
				<view class="jia"  v-show="value">+</view>
				<view class="">新建头像昵称</view>
			</view>
		</view>
		<view class="setting-small">
			修改后，会在“重走长征路 共亿百年史”下次同步你的昵称、头像时生效。
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value:1,
				flag: false,
			}
		},
		onLoad() {
		},
	
		methods: {
			 showTag(){
			        this.flag = !this.flag;
			    }, 
		}
	}
</script>


<style>
	.setting {
		background-color: #f2f2f2;
		height: max-content;
		color: #666;
		font-size: 14px;
		height: max-content;
	}

	.setting-small {
		color: #999;
		font-size: 11px;
		line-height: 20px;
		width: 90%;
		margin:10px auto;
	}

	.setting-cont {
		background-color: #fff;
		padding: 10px;
		box-sizing: border-box;
	}

	.flex {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.setting-cont-one {
		padding: 10px;
		box-sizing: border-box;
		background-color: #fff;
	}

	.setting-cont-one image {
		width: 50px;
		border-radius: 50%;
		display: block;
	}
	.flexs{display: flex;flex-direction: row;}
	.sett-cont-two{border-bottom: 1px solid #ccc;padding:5px 10px;box-sizing: border-box;align-items: center;line-height: 30px;}
	.sett-cont-two:last-child{border-bottom: 0;}
	.sett-cont-two image{border-radius: 50%;display: block;width:30px;margin:0  15px 0 0;}
	.dui{color: green;font-size:20px;width: 20px;}
	.jia{width: 30px;text-align: center;margin-right: 15px;font-size: 20px !important;}
	
	
</style>
